<div>
  <mdl-layout mdl-layout-fixed-header [mdl-layout-tab-active-index]="tabActiveIndex" mdl-layout-header-seamed mdl-layout-mode="standard" (mdl-layout-tab-active-changed)="tabChanged($event)">
    <mdl-layout-header mdl-shadow="2">
      <mdl-layout-header-row>
        <mdl-layout-title>Cnode 社区</mdl-layout-title>
        <mdl-layout-spacer></mdl-layout-spacer>
        <!-- Navigation. We hide it in small screens. -->
        <a mdl-button="" mdl-button-type="icon" [routerLink]="['/message']" ng-reflect-mdl-button-type="icon" class="mdl-button mdl-button--icon">
          <mdl-icon class="material-icons" [mdl-badge]="msgCount" mdl-badge-overlap>message</mdl-icon>
        </a>
      </mdl-layout-header-row>
    </mdl-layout-header>
    <mdl-layout-drawer>
      <mdl-layout-title>
        <ng-container *ngIf="userDetail">
          <div class="user-card">
            <div class="user-avatar">
              <img [src]="userDetail.avatar_url" preview="7rem" alt="">
            </div>
            <div class="login-name">{{userDetail.loginname}}</div>
            <div class="user-score">积分：{{userDetail.score}}</div>
            <div class="create-time">注册于：{{userDetail.create_at | fromNow}}</div>
          </div>
        </ng-container>
        <ng-container *ngIf="!userDetail">
          <div>
            <div class="no-login">
              <a [routerLink]="['/login']">
                <mdl-icon>person</mdl-icon>
              </a>
              <p>点击头像登陆</p>
            </div>
          </div>
        </ng-container>
      </mdl-layout-title>
      <ng-container *ngIf="userDetail">
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" [routerLink]="['/profile']">个人中心</a>
          <a class="mdl-navigation__link" [routerLink]="['/message']">我的消息</a>
          <a class="mdl-navigation__link" [routerLink]="['/login']">退出登录</a>
        </nav>
      </ng-container>

    </mdl-layout-drawer>
    <mdl-layout-content>
      <ng-container *ngFor="let title of titles">
        <mdl-layout-tab-panel [mdl-layout-tab-panel-title]="title">
          <app-topic *ngFor="let item of list" [topic]="item" (onClick)="gotoDetail($event, item.id)" #topic></app-topic>
        </mdl-layout-tab-panel>
      </ng-container>
      <a [routerLink]="['/publish']" mdl-button class="create-topic" mdl-button-type="fab" mdl-colored="accent" mdl-ripple>
        <mdl-icon>add</mdl-icon>
      </a>
      <ng-container *ngIf="loading">
        <div class="loading">
          <mdl-spinner [active]="true"></mdl-spinner>
        </div>
      </ng-container>
    </mdl-layout-content>
  </mdl-layout>
</div>
<router-outlet>
</router-outlet>